import React, { Component } from 'react'
import { Carousel } from 'antd';
import './DjradioBanner.scss'
import { getDjCatelist } from '../../../api';
import { withRouter } from 'react-router-dom'

class DjradioBanner extends Component {
  constructor() {
    super()
    this.swiperRef = React.createRef()
    this.state = {
      djMenuList : [],
      nowId: ''
    }
  }
  componentDidMount () {
    getDjCatelist().then(({data}) => {
      console.log(data)
      if(data.code === 200) {
        console.log('sss')
        this.setState({
          djMenuList: data.categories
        })
      }
    })
  }
  gotoCategory(id) {
    this.setState({
      nowId: id
    })
    this.props.history.push(`/discover/djradio/category/:${id}`)
  }

  render() {
    function onChange(a, b, c) {
      console.log(a, b, c);
    }
    return (
      <div id="DjradioBanner">
        <div className='swiper_box'>
          <div className="btn_swiper_left" onClick={()=>this.swiperRef.current.prev()}><i className="iconfont icon-Left-copy"></i></div>
          <Carousel afterChange={onChange} ref={this.swiperRef}>
            <div className='swiper_item'>
              <ul>
                {
                  this.state.djMenuList.map((item, index) => {
                    return (
                      <li key={index} onClick={this.gotoCategory.bind(this, item.id)} className={this.state.nowId === item.id? 'li_act':''}>
                        <div className="img" style={{background:`url(${item.picMacUrl})`,backgroundPositionX: this.state.nowId === item.id?'48px': '0'}} />
                        <p>情感</p>
                      </li>
                    )
                  })
                }
              </ul>
            </div>
            <div className='swiper_item'>
              2
            </div>
          </Carousel>
          <div className="btn_swiper_right"  onClick={()=>this.swiperRef.current.next()}><i className="iconfont icon-Left"></i></div>
        </div>
      </div>
    )
  }
}
export default withRouter(DjradioBanner)